
/*
 * @Author: jiu yin
 * @Date: 2023-04-27 14:23:19
 * @LastEditTime: 2023-06-06 14:49:28
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \AI admin\src\view\gender\index.tsx
 * jiu
 */
import { useState, useEffect, useRef } from 'react'
import './index.scss'
import { Switch, theme, Space, Tag, Modal, Form, Input, Button } from 'antd';
import { getColorArr } from "@/utils"

import { PlusOutlined } from '@ant-design/icons';
import type { InputRef } from 'antd';

import { TweenOneGroup } from 'rc-tween-one';




function Gender() {
    let getColorArrLen = getColorArr().length
    const [form] = Form.useForm();
    //弹框
    const [isModalOpen, setIsModalOpen] = useState(false);


    let title = ['添加女性形容表', '添加男性形容表', '添加无性别性形容表']
    let [titleIndex, setTitleIndex] = useState(0)
    //开关
    const SwitchOnchange = (e: boolean, num: number) => {
        console.log(e, num);
    }
    //编辑
    const edit = (num: number) => {
        setTitleIndex(num)
        setIsModalOpen(true)
        console.log('详情', num);
    }

    let [tagsList, steTagsList] = useState(['尼玛', '我说', '咋了', '这门亲事我不同意', '尼玛', '我说', '咋了', '这门亲事我不同意'])




    //取消
    const cancel = () => {
        setIsModalOpen(false);

    }

    const handleOk = (e) => {
        console.log(e);
    }


    //标签

    const { token } = theme.useToken();
    const [tags, setTags] = useState(['Tag 1', 'Tag 2', 'Tag 3']);
    const [inputVisible, setInputVisible] = useState(false);
    const [inputValue, setInputValue] = useState('');
    const inputRef = useRef<InputRef>(null);


    useEffect(() => {
        if (inputVisible) {
            inputRef.current?.focus();
        }
    }, [inputVisible]);

    const handleClose = (removedTag: string) => {
        const newTags = tags.filter((tag) => tag !== removedTag);
        console.log(newTags);
        setTags(newTags);
    };

    const showInput = () => {
        setInputVisible(true);
    };

    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setInputValue(e.target.value);
    };

    const handleInputConfirm = (e:any) => {
        e.stopPropagation();
        e.preventDefault()
        if (inputValue && tags.indexOf(inputValue) === -1) {
            setTags([...tags, inputValue]);
        }
        setInputVisible(false);
        setInputValue('');
    };

    const forMap = (tag: string,index:number) => {
        const tagElem = (
            <Tag
                closable
                className='tagSynonym'
                color={getColorArr()[index % getColorArrLen]} 
                onClose={(e) => {
                    e.preventDefault();
                    handleClose(tag);
                }}
            >
                {tag}
            </Tag>
        );
        return (
            <span key={tag} style={{ display: 'inline-block' }}>
                {tagElem}
            </span>
        );
    };

    const tagChild = tags.map(forMap);

    const tagPlusStyle = {
        background: token.colorBgContainer,
        borderStyle: 'dashed',
    };




    return (
        <>
            <ul className='gender'>
                {/* 女 */}
                <li>
                    <div className='title'>
                        <span>女</span>
                        <div>
                            <Switch defaultChecked onChange={(e) => SwitchOnchange(e, 0)} />
                            <Space size="middle" className='editBut'>
                                <a href='#' onClick={() => edit(0)}>编辑</a>
                            </Space>
                        </div>

                    </div>
                    <div className='body'>
                        <p>形容词表</p>
                        <div className='tagItem'>
                            <div>
                                <Space size={[0, 8]} wrap>
                                    {tagsList.length > 0 && tagsList.map((item, index) => {
                                        return <Tag color={getColorArr()[index % getColorArrLen]} key={index}>{item}</Tag>
                                    })}
                                </Space>
                            </div>

                        </div>
                    </div>
                </li>
                {/* 男 */}
                <li>
                    <div className='title'>
                        <span>男</span>
                        <div>
                            <Switch defaultChecked onChange={(e) => SwitchOnchange(e, 1)} />
                            <Space size="middle" className='editBut'>
                                <a href='#' onClick={() => edit(1)}>编辑</a>
                            </Space>
                        </div>

                    </div>
                    <div className='body'>
                        <p>形容词表</p>
                        <div className='tagItem'>
                            <div>
                                <Space size={[0, 8]} wrap>
                                    {tagsList.length > 0 && tagsList.map((item, index) => {
                                        return <Tag color={getColorArr()[index % getColorArrLen]} key={index}>{item}</Tag>
                                    })}
                                </Space>
                            </div>

                        </div>
                    </div>
                </li>

                {/* 无性别 */}

                <li>
                    <div className='title'>
                        <span>无性别</span>
                        <div>
                            <Switch defaultChecked onChange={(e) => SwitchOnchange(e, 2)} />
                            <Space size="middle" className='editBut'>
                                <a href='#' onClick={() => edit(2)}>编辑</a>
                            </Space>
                        </div>

                    </div>
                    <div className='body'>
                        <p>形容词表</p>
                        <div className='tagItem'>
                            <div>
                                <Space size={[0, 8]} wrap>
                                    {tagsList.length > 0 && tagsList.map((item, index) => {
                                        return <Tag color={getColorArr()[index % getColorArrLen]} key={index}>{item}</Tag>
                                    })}
                                </Space>
                            </div>

                        </div>
                    </div>
                </li>

            </ul>



            <div>

                {isModalOpen && <Modal title={title[titleIndex]} open={isModalOpen} onCancel={() => { cancel() }} onOk={handleOk} keyboard>

                    <div className='synonym'>
                        <div style={{ marginBottom: 16 }} >
                            <TweenOneGroup
                                enter={{
                                    scale: 0.8,
                                    opacity: 0,
                                    type: 'from',
                                    duration: 100,
                                }}
                                onEnd={(e: any) => {
                                    if (e.type === 'appear' || e.type === 'enter') {
                                        (e.target as any).style = 'display: inline-block';
                                    }
                                }}
                                leave={{ opacity: 0, width: 0, scale: 0, duration: 200 }}
                                appear={false}
                            >
                                {tagChild}
                            </TweenOneGroup>
                        </div>
                        {inputVisible ? (
                            <Input
                                ref={inputRef}
                                type="text"
                                size="small"
                                style={{ width: 78 }}
                                value={inputValue}
                                onChange={handleInputChange}
                                onBlur={(e) => handleInputConfirm(e)}
                                    onPressEnter={(e) => handleInputConfirm(e)}
                            />
                        ) : (
                            <Tag onClick={showInput} style={tagPlusStyle}>
                                <PlusOutlined /> 添加新标签
                            </Tag>
                        )}


                    </div>
                    <p className='mr_t0'>注：输入词汇后按回车键完成</p>




                </Modal>}
            </div>

        </>
    )
}

export default Gender
